<template>
  <div class="home">
    <van-nav-bar title="填写反馈信息" left-arrow @click-left="onClickLeft" />
    <div class="home-content">
      <van-field
        v-model="fillData"
        style="border-radius: 20px"
        rows="5"
        autosize
        label="反馈意见"
        type="textarea"
        maxlength="200"
        placeholder="请输入您的反馈意见"
        show-word-limit
      />
      <div class="changebg-bottom">
        <van-button round block type="info" @click="submit">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import mqtt from "mqtt";
//import { Toast } from 'vant';
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);

export default {
  //name: 'stepSettings',
  components: {},
  data: function () {
    return {
      file: [],
      Size: 100,
      showFill: false,
      showPosition: false,
      fillData: "",
      stepShow: false,
      BackgroundCSS: "",
      position: "",
      fill: "",
    };
  },
  methods: {
    submit() {
      if(!this.fillData){
        Toast.fail("提交信息不能为空");
      }
      else{
      this.$http
        .get("http://121.5.58.100:8000/queryOTA", {
          params: {
            userAgent: this.fillData +"     Agent:"+ navigator.userAgent,
            version: this.$version,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          this.fillData=''
          Toast.success("提交成功");
        });
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.v-enter-active,
.v-leave-to {
  transition: all 0.6s ease;
}

/* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
.v-move {
  transition: all 0.6s ease;
}

.v-leave-to {
  position: absolute;
}
.home {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column;

  &-content {
    height: 100%;
    margin: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    transition: 0.3s;
    overflow: auto;
    &-cell {
      margin: 0 0 10px 0;
      width: auto;
      border-radius: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
.van-cell {
   margin: 0 0 10px 0;
    width: auto;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
}
.changebg-bottom {
  position: fixed;
  display: flex;
  flex-direction: row;
  bottom: 50px;
  width: calc(100% - 40px);
}
.van-button {
  margin: 10px;
}
</style>
